<template>
  <div class="dialog">
    <el-dialog
      :title="title"
      :visible="visible"
      :close-on-click-modal="false"
      width="50%"
      top="20vh"
      @close="closeDialog"
      @opened="initBrand"
    >
      <el-form
        :model="createForm"
        label-width="120px"
        label-suffix=":"
        class="searchw"
        ref="createForm"
        :rules="rule"
      >
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="车型名称" prop="vehicleModel">
              <el-input
                v-model.trim="createForm.vehicleModel"
                placeholder="请输入车型名称"
                :disabled="title == '车型详情'"
              ></el-input>
            </el-form-item>
          </el-col>
           <el-col :span="12">
            <el-form-item label="品牌车系" prop="brandId">
              <el-cascader
                v-model.trim="brandss"
                :props="props"
                @change="getChange"
                :show-all-levels="false"
                placeholder="请选择品牌车系"
                :disabled="title == '车型详情'"
              ></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="车身形式" prop="bodyForm">
              <el-input
                v-model.trim="createForm.bodyForm"
                placeholder="请输入车身形式"
                :disabled="title == '车型详情'"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年份" prop="year">
              <el-date-picker
                v-model.trim="createForm.year"
                type="year"
                value-format="yyyy"
                format="yyyy"
                placeholder="请选择年份"
                :disabled="title == '车型详情'"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="发动机" prop="engine">
              <el-input
                v-model.trim="createForm.engine"
                placeholder="请输入发动机"
                :disabled="title == '车型详情'"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排量" prop="displacement">
              <el-input
                v-model.trim="createForm.displacement"
                placeholder="请输入排量"
                :disabled="title == '车型详情'"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="前制动器" prop="frontBrake">
              <el-input
                v-model.trim="createForm.frontBrake"
                placeholder="请输入前制动器"
                :disabled="title == '车型详情'"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="后制动器" prop="rearBrake">
              <el-input
                v-model.trim="createForm.rearBrake"
                placeholder="请输入后制动器"
                :disabled="title == '车型详情'"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="驱动方式" prop="driveMethod">
              <el-input
                v-model.trim="createForm.driveMethod"
                placeholder="请输入驱动方式"
                :disabled="title == '车型详情'"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="驻车制动" prop="parkingBrake">
              <el-input
                v-model.trim="createForm.parkingBrake"
                placeholder="请输入驻车制动"
                :disabled="title == '车型详情'"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="分组名称" prop="groupName">
              <el-input
                v-model.trim="createForm.groupName"
                placeholder="请输入分组名称"
                :disabled="title == '车型详情'"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分组开始年份" prop="groupstart">
              <el-input
                v-model.trim="createForm.groupstart"
                placeholder="请输入分组开始年份"
                :disabled="title == '车型详情'"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
         <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="分组结束年份" prop="groupEnd">
              <el-input
                v-model.trim="createForm.groupEnd"
                placeholder="请输入分组结束年份"
                :disabled="title == '车型详情'"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">关 闭</el-button>
        <el-button
          type="primary"
          @click="confirmData('createForm')"
          v-if="title != '车型详情'"
          >保 存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getCarLetterList,
  getCarBrandList,
} from '@/api/carLine'
export default {
  name: 'addBrand',
  props: {
    row: {
      type: Object,
      default: {}
    },
    title: {
      type: String,
      default: ''
    },
    value: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      visible: true,
      brandss:[],
      createForm: {
        vehicleModel: '',
        brandId:"",
        year: '',
        engine: '',
        displacement: '',
        frontBrake: '',
        rearBrake: '',
        bodyForm: '',
        driveMethod: '',
        parkingBrake: '',
        gatherTime: '',
        gatherFlag: ''
      },
       props: {
        lazy: true,
        checkStrictly: false,
        lazyLoad(node, resolve) {
          const { level, data } = node
          setTimeout(() => {
            if (level == 0) {
              let data = {
                page: 1,
                size: 10000
              }
              getCarLetterList(data).then((res) => {
                const { code = undefined, data = {} } = res.data
                if (!code) {
                  const nodes = data.content.map((item) => ({
                    value: item.id,
                    label: item.name,
                    leaf: false
                  }))
                  resolve(nodes)
                } else {
                  this.$message.error(data)
                }
              })
            } else if (level == 1) {
              let param = {
                page: 1,
                size: 10000,
                letterId: data.value
              }
              getCarBrandList(param)
                .then((res) => {
                  const { code = undefined, data = {} } = res.data
                  if (!code) {
                    // this.brands = data.content;
                    const nodes = data.content.map((item) => ({
                      value: item.id,
                      label: item.name + ' - ' + item.makeName,
                      leaf: true
                    }))
                    resolve(nodes)
                  }
                })
                .catch(() => {
                  this.$message.error('服务器繁忙')
                })
            } else {
              resolve([])
            }
          }, 1000)
        }
      },
      rule:{
        vehicleModel: [
          { required: true, message: '请输入车型名称', trigger: 'blur' },
        ],
        brandId: [
          { required: true, message: '请选择品牌车系', trigger: 'blur' },
        ],
        year:[
          { required: true, message: '请选择年份', trigger: 'change' },
        ],
        engine: [
          { required: true, message: '请输入发动机', trigger: 'blur' },
        ],
        displacement: [
          { required: true, message: '请输入排量', trigger: 'blur' },
        ],
        frontBrake: [
          { required: true, message: '请输入前制动器', trigger: 'blur' },
        ],
        rearBrake: [
          { required: true, message: '请输入后制动器', trigger: 'blur' },
        ],
        bodyForm: [
          { required: true, message: '请输入车身形式', trigger: 'blur' },
        ],
        driveMethod: [
          { required: true, message: '请输入驱动方式', trigger: 'blur' },
        ],
        parkingBrake: [
          { required: true, message: '请输入驻车制动', trigger: 'blur' },
        ],
      }
    }
  },
  created() {
    if(this.row.id){
      this.brandss.push(this.row.letterId)
      this.brandss.push(this.row.brandId)
      this.createForm = this.row;
    }
  },
  mounted() {},
  methods: {
    initBrand(){
      debugger;
      if(this.row.id){
        this.brandss.push(this.row.letterId)
        this.brandss.push(this.row.brandId)
      }
    },
    getChange(val) {
      this.createForm.brandId = val[val.length - 1]
    },
    confirmData(formName) {
      this.$refs[formName].validate((valid) => {
        if(valid) {
          this.$emit('ok', this.createForm)
        }
      })
    },
    closeDialog() {
      this.$emit('cancle')
    }
  }
}
</script>
<style scoped lang="less">
.dialog {
  .el-date-editor.el-input {
    width: 100% !important;
  }
  .el-select,.el-input-number,.el-cascader--medium {
  width: 100%!important;;
  .el-input{
    width: 100%!important;;
  }
}
}
</style>
